<script setup>
import { onMounted, watch } from 'vue'
// element汉化
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useStore } from 'vuex'
import LayoutSwitcher from '@/components/LayoutSwitcher.vue'

const store = useStore()

function applyThemeClass(theme) {
  const html = document.documentElement
  if (theme === 'dark') {
    html.classList.add('dark')
  } else {
    html.classList.remove('dark')
  }
}

function applyPrimaryColor(color) {
  const root = document.documentElement
  root.style.setProperty('--el-color-primary', color)
}

onMounted(() => {
  store.dispatch('initFromStorage')
  applyThemeClass(store.getters.uiTheme)
  applyPrimaryColor(store.getters.uiPrimaryColor)
})

watch(() => store.getters.uiTheme, (v) => applyThemeClass(v))
watch(() => store.getters.uiPrimaryColor, (v) => applyPrimaryColor(v))
</script>

<template>
  <el-config-provider :locale="zhCn">
    <router-view />
    <LayoutSwitcher />
  </el-config-provider>
</template>

<style scoped lang="less">
a {
 text-decoration: none !important;
}

</style>
